<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS和HTML基础部分 | YTBlog</title>
    <meta name="generator" content="VuePress 1.5.2">
    
    <meta name="description" content="前端技术分享">
    <link rel="preload" href="/ytblog/assets/css/0.styles.cb920d31.css" as="style"><link rel="preload" href="/ytblog/assets/js/app.5ba5dcf6.js" as="script"><link rel="preload" href="/ytblog/assets/js/2.f25dafc3.js" as="script"><link rel="preload" href="/ytblog/assets/js/7.7c06f209.js" as="script"><link rel="prefetch" href="/ytblog/assets/js/10.5a02d3b2.js"><link rel="prefetch" href="/ytblog/assets/js/11.44a85492.js"><link rel="prefetch" href="/ytblog/assets/js/12.66c94e70.js"><link rel="prefetch" href="/ytblog/assets/js/13.fbec9428.js"><link rel="prefetch" href="/ytblog/assets/js/3.1ec314c7.js"><link rel="prefetch" href="/ytblog/assets/js/4.6f6a54bd.js"><link rel="prefetch" href="/ytblog/assets/js/5.64df639e.js"><link rel="prefetch" href="/ytblog/assets/js/6.60c7b6d3.js"><link rel="prefetch" href="/ytblog/assets/js/8.f6875229.js"><link rel="prefetch" href="/ytblog/assets/js/9.6f0d250c.js">
    <link rel="stylesheet" href="/ytblog/assets/css/0.styles.cb920d31.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/ytblog/" class="home-link router-link-active"><!----> <span class="site-name">YTBlog</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/ytblog/" class="nav-link">
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="练手小项目" class="dropdown-title"><span class="title">练手小项目</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ytblog/HTML/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  HTML&amp;CSS
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/JavaScript/" class="nav-link">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/jquery/" class="nav-link">
  jquery
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/vue/" class="nav-link">
  vue
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端一些概念理解" class="dropdown-title"><span class="title">前端一些概念理解</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ytblog/CSS/" class="nav-link">
  知识点整理
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/ES6/" class="nav-link">
  读书笔记
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/ytblog/" class="nav-link">
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="练手小项目" class="dropdown-title"><span class="title">练手小项目</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ytblog/HTML/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  HTML&amp;CSS
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/JavaScript/" class="nav-link">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/jquery/" class="nav-link">
  jquery
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/vue/" class="nav-link">
  vue
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端一些概念理解" class="dropdown-title"><span class="title">前端一些概念理解</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ytblog/CSS/" class="nav-link">
  知识点整理
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/ES6/" class="nav-link">
  读书笔记
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>CSS和HTML基础部分</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/ytblog/HTML/#webkit" class="sidebar-link">webkit</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/ytblog/HTML/#css照片魔方" class="sidebar-link">CSS照片魔方</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/ytblog/HTML/#小米手机端web商城" class="sidebar-link">小米手机端web商城</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="css和html基础部分"><a href="#css和html基础部分" class="header-anchor">#</a> CSS和HTML基础部分</h1> <h2 id="webkit"><a href="#webkit" class="header-anchor">#</a> webkit</h2> <h4 id="用webkit-filter实现鼠标移动至图片位置清晰显示图片的效果"><a href="#用webkit-filter实现鼠标移动至图片位置清晰显示图片的效果" class="header-anchor">#</a> 用webkit filter实现鼠标移动至图片位置清晰显示图片的效果</h4> <p><a href="https://ucas-yutao.gitee.io/yt_project/webkit-filter/" target="_blank" rel="noopener noreferrer">webkit-filter<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p>webkit引擎可以说是目前范围最广，影响力最大的浏览器引擎，支持的浏览器包括：</p> <p>WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器 基于 Webkit 开发。</p> <h4 id="webkit-filter-支持的效果有："><a href="#webkit-filter-支持的效果有：" class="header-anchor">#</a> -webkit-filter 支持的效果有：</h4> <ul><li><strong>blur 模糊</strong></li> <li><strong>brightness 亮度</strong></li> <li><strong>contrast 对比度</strong></li> <li><strong>drop-shadow 阴影</strong></li> <li><strong>grayscale 灰度</strong></li> <li><strong>opacity 透明度</strong></li> <li><strong>sepia 褐色</strong></li> <li><strong>invert 反色</strong></li> <li><strong>saturate 饱和度</strong></li> <li><strong>hue-rotate 色相旋转</strong></li></ul> <p>使用方法是标准的CSS写法，</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">-webkit-filter</span><span class="token punctuation">:</span> <span class="token function">blur</span><span class="token punctuation">(</span>10px<span class="token punctuation">)</span> <span class="token function">brightness</span><span class="token punctuation">(</span>10<span class="token punctuation">)</span> <span class="token function">grayscale</span><span class="token punctuation">(</span>1<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>可以利用这种写法将图片初识状态设置为模糊或朦胧感，鼠标聚焦后再进行显示</p> <div class="language-css extra-class"><pre class="language-css"><code>			<span class="token selector">img:hover</span><span class="token punctuation">{</span>
				<span class="token property">-webkit-filter</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
</code></pre></div><p>对网页的排版可能有意想不到的效果（<a href="https://ucas-yutao.gitee.io/yt_project/webkit-filter/" target="_blank" rel="noopener noreferrer">demo<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>）</p> <h2 id="css照片魔方"><a href="#css照片魔方" class="header-anchor">#</a> CSS照片魔方</h2> <p>不用JS<a href="https://ucas-yutao.gitee.io/yt_project/pure_css/" target="_blank" rel="noopener noreferrer">实现照片魔方功能<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p>perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。</p> <p>当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。需定义一个合适的数值，不然旋转时会出现怪异感。</p> <h5 id="把几张图片组合成正方体的核心思想是：通过三维旋转和三维位移把同一个位置的不同图片放到正方体的六个面上："><a href="#把几张图片组合成正方体的核心思想是：通过三维旋转和三维位移把同一个位置的不同图片放到正方体的六个面上：" class="header-anchor">#</a> 把几张图片组合成正方体的核心思想是：通过三维旋转和三维位移把同一个位置的不同图片放到正方体的六个面上：</h5> <p>例如一个400px边长的正方体，对于正方体顶面：transform: rotateX(90deg) translateZ(200px);</p> <h4 id="不用js实现选择切换："><a href="#不用js实现选择切换：" class="header-anchor">#</a> 不用JS实现选择切换：</h4> <p>利用input单选框的CSS：checked~属性实现切换，生效的CSS要在input框后面且同级。</p> <p>input中设置ID</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>where<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>dw<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>达瓦更扎<span class="token punctuation">&quot;</span></span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>hidden<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div><p>label中用for绑定</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>btn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>dw<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>达瓦更扎<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>CSS中设置选中后的所有照片父节点的旋转角度</p> <div class="language-css extra-class"><pre class="language-css"><code>			<span class="token selector">#kk:checked~.lifang</span><span class="token punctuation">{</span>
				<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate3d</span><span class="token punctuation">(</span>1<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>90deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
</code></pre></div><p>即可不用JS实现照片魔方效果（<a href="https://ucas-yutao.gitee.io/yt_project/pure_css/" target="_blank" rel="noopener noreferrer">demo<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>）</p> <h2 id="小米手机端web商城"><a href="#小米手机端web商城" class="header-anchor">#</a> 小米手机端web商城</h2> <p>CSS和HTML学习完之后的练手项目：<a href="https://ucas-yutao.gitee.io/yt_project/mi/" target="_blank" rel="noopener noreferrer">山寨小米<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p>打开小米官网，谷歌浏览器切换成手机端重新刷新发现后端发回的不是同一个页面，也就是小米对PC和手机做了两个页面，这次针对手机端进行山寨。</p> <p>需要注意的是要在head里加上mete viewport的标签，不然放到手机端会等比缩小。</p> <p>如果不用rem布局可以在手机端设置固定分辨率的方式，以这个分辨率进行设计，在别的手机上也可以等比放大。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>width=375,user-scalable=no<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div><p>不用JS实现下画框：</p> <p>同样三部剧</p> <div class="language-html extra-class"><pre class="language-html"><code>				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>choose<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>choose<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>choose<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>download<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>xhk<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>简易练手版山寨小米完成（<a href="https://ucas-yutao.gitee.io/yt_project/mi/" target="_blank" rel="noopener noreferrer">demo<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>）</p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/ytblog/assets/js/app.5ba5dcf6.js" defer></script><script src="/ytblog/assets/js/2.f25dafc3.js" defer></script><script src="/ytblog/assets/js/7.7c06f209.js" defer></script>
  </body>
</html>
